<template>
  <div>
    <!-- 标题 -->
    <van-nav-bar
      left-arrow
      @click-left="onClickLeft"
    />
    <!-- 用户信息 -->
    <div class="user_box">
      <van-row>
        <van-col span="15">
          <van-image
            width="1.7rem"
            height="1.7rem"
            :src="'apis/kuan_api/photo/'+user.user_img"
            round
          />
        </van-col>
        <van-col
          span="9"
          style="margin-top:10px"
        >
          <van-button
            v-if="$store.state.user.user_id ==this.userid"
            type="default"
            round
            class="btn"
            @click="setinfo"
          >编辑资料</van-button>
        </van-col>
      </van-row>
      <p class="nickname">{{user.user_nickname?user.user_nickname:user.user_name}}
        <van-tag
          type="primary"
          round
          class="level"
        ><i>{{user.level}}</i></van-tag>
      </p>
      <p class="signature">{{user.Signature}}</p>
      <p>
        <van-tag
          v-if="user.sex=='男'"
          class="sex"
          round
        >♂
        </van-tag>
        <van-tag
          v-else
          class="sex_nv"
          round
        >♀
        </van-tag>
        <van-tag
          class="lasttime"
          round
        >2分钟前活跃</van-tag>
      </p>
    </div>
    <!-- 动态 -->
    <div class="dongtai">
      <div class="dogtai_box">
        <p class="all">全部动态（{{message.Num?message.Num:0}}）</p>
        <div
          class="message"
          v-for="item in message.message"
          :key="item.id"
        >
          <van-row>
            <van-col span="3">
              <van-image
                width="1.1rem"
                height="1.1rem"
                :src="'apis/kuan_api/photo/'+item.user_img"
                round
              />
            </van-col>
            <van-col
              span="19"
              @click="lookDetail(item.id)"
            >
              <p style="margin:5px"><b>{{item.user_nickname}}</b></p>
              <p style="margin:5px">{{item.AddTime}}</p>

              <p>{{item.message}}</p>
              <div v-if="item.img !=null">
                <van-image
                  :src="'apis/kuan_api/img/'+item.img"
                  fit="contain"
                  v-if="item.img.search('.mp4')==-1"
                />
                <video
                  width="320"
                  height="240"
                  controls
                  v-if="item.img.search('.mp4')!=-1"
                >
                  <source
                    :src="'apis/kuan_api/img/'+item.img"
                    type="video/mp4"
                  >
                </video>
              </div>
            </van-col>
            <van-col span="2">
              <van-button
                class="selbtn"
                @click="select(item.id,item.user_id,item.img)"
              >
                <van-icon name="arrow-down" />
              </van-button>
            </van-col>
          </van-row>

          <van-tag
            class="tag"
            @click="tomodule(item.Productid)"
          >
            <van-image
              width="0.6rem"
              height="0.6rem"
              :src="'apis/kuan_api/ProductImg/'+item.ProductImg"
            />
            {{item.ProductName}}
          </van-tag>
        </div>
      </div>
    </div>

    <!-- 非用户弹出层 -->
    <van-popup
      v-if="this.userid!=$store.state.user.user_id"
      v-model="show"
      round
      position="bottom"
      :style="{ height: '30%' }"
    >
      <!-- 头部小按钮 -->
      <p style="text-align:center;margin-top:3px">
        <van-button class="top_btn"></van-button>
      </p>
      <!-- 第一行按钮 -->
      <div class="icon_box">
        <div>
          <van-row>
            <van-col
              span="4"
              style="margin-right:10px;text-align:center"
            >
              <van-button
                icon="star-o"
                class="first_btn"
              ></van-button>
              <p>收藏</p>
            </van-col>
            <van-col
              span="4"
              style="margin-right:10px;text-align:center"
            >
              <van-button
                icon="eye-o"
                class="first_btn"
              ></van-button>
              <p>屏蔽</p>
            </van-col>
            <van-col
              span="4"
              style="margin-right:10px;text-align:center"
            >
              <van-button
                icon="bulb-o"
                class="first_btn"
              ></van-button>
              <p>举报</p>
            </van-col>
          </van-row>
        </div>
      </div>
      <!-- 第二行按钮 -->
      <div class="icon_box">
        <div>
          <van-row>
            <van-col
              span="4"
              style="margin-right:10px;text-align:center"
            >
              <van-button
                icon="records"
                class="sec_btn"
              ></van-button>
              <p>动态</p>
            </van-col>
            <van-col
              span="4"
              style="margin-right:10px;text-align:center"
            >
              <van-button
                icon="envelop-o"
                class="sec_btn"
              ></van-button>
              <p>私信</p>
            </van-col>
            <van-col
              span="4"
              style="margin-right:10px;text-align:center"
            >
              <van-button
                icon="wechat"
                class="thi_btn"
              ></van-button>
              <p>微信</p>
            </van-col>
            <van-col
              span="4"
              style="margin-right:10px;text-align:center"
            >
              <van-button
                icon="bulb-o"
                class="thi_btn"
              ></van-button>
              <p>朋友圈</p>
            </van-col>
            <van-col
              span="4"
              style="margin-right:10px;text-align:center"
            >
              <van-button
                icon="bulb-o"
                class="thi_btn"
              ></van-button>
              <p>QQ</p>
            </van-col>
          </van-row>
        </div>
      </div>
      <!-- 取消按钮 -->
      <van-button
        type="primary"
        block
        style="background-color:#f5f5f5"
        @click="quxiao"
      >取消</van-button>
    </van-popup>
    <!-- 用户弹出层 -->
    <van-popup
      v-else
      v-model="show"
      round
      position="bottom"
      :style="{ height: '29%' }"
    >
      <!-- 头部小按钮 -->
      <p style="text-align:center;margin-top:3px">
        <van-button class="top_btn"></van-button>
      </p>
      <!-- 第一行按钮 -->
      <div class="icon_box">
        <div>
          <van-row>
            <van-col
              span="4"
              style="margin-right:10px;text-align:center"
            >
              <van-button
                icon="back-top"
                class="first_btn"
              ></van-button>
              <p>置顶</p>
            </van-col>
            <van-col
              span="4"
              style="margin-right:10px;text-align:center"
            >
              <van-button
                icon="star-o"
                class="first_btn"
              ></van-button>
              <p>收藏</p>
            </van-col>
            <van-col
              span="4"
              style="margin-right:10px;text-align:center"
            >
              <van-button
                icon="edit"
                class="first_btn"
              ></van-button>
              <p>编辑</p>
            </van-col>
            <van-col
              span="4"
              style="margin-right:10px;text-align:center"
            >
              <van-button
                icon="delete-o"
                class="first_btn"
                @click="deleteDongtai"
              ></van-button>
              <p>删除</p>
            </van-col>
          </van-row>
        </div>
      </div>
      <!-- 第二行按钮 -->
      <div class="icon_box">
        <div>
          <van-row>
            <van-col
              span="4"
              style="margin-right:10px;text-align:center"
            >
              <van-button
                icon="records"
                class="sec_btn"
              ></van-button>
              <p>动态</p>
            </van-col>
            <van-col
              span="4"
              style="margin-right:10px;text-align:center"
            >
              <van-button
                icon="envelop-o"
                class="sec_btn"
              ></van-button>
              <p>私信</p>
            </van-col>
            <van-col
              span="4"
              style="margin-right:10px;text-align:center"
            >
              <van-button
                icon="wechat"
                class="thi_btn"
              ></van-button>
              <p>微信</p>
            </van-col>
            <van-col
              span="4"
              style="margin-right:10px;text-align:center"
            >
              <van-button
                icon="bulb-o"
                class="thi_btn"
              ></van-button>
              <p>朋友圈</p>
            </van-col>
            <van-col
              span="4"
              style="margin-right:10px;text-align:center"
            >
              <van-button
                icon="bulb-o"
                class="thi_btn"
              ></van-button>
              <p>QQ</p>
            </van-col>
          </van-row>
        </div>
      </div>
      <!-- 取消按钮 -->
      <van-button
        block
        style="background-color:#f5f5f5"
        @click="quxiao"
      >取消</van-button>
    </van-popup>
  </div>
</template>

<script>
export default {
  name: "userdetail",
  data() {
    return {
      message: [],
      userid: "",
      user: [],
      show: false,
    };
  },
  methods: {
    // 返回上一级
    onClickLeft() {
      window.history.go(-1);
    },
    getmessage() {
      this.axios
        .post("apis/kuan_api/index.php", {
          userid: this.userid,
          code: 1,
        })
        .then((res) => {
          console.log(res.data.message);
          this.message = res.data;
        })
        .catch((err) => {
          console.error(err);
        });
    },
    getuser() {
      this.axios
        .post("apis/kuan_api/searchUser.php", {
          userid: this.userid,
        })
        .then((res) => {
          this.user = res.data.users[0];
        })
        .catch((err) => {
          console.error(err);
        });
    },
    // 查看动态
    lookDetail(id) {
      sessionStorage.setItem("message_id", JSON.stringify(id));
      sessionStorage.setItem(
        "fullpath",
        JSON.stringify(this.$router.history.current.fullPath)
      );
      this.$store.state.fullpath = this.$router.history.current.fullPath;
      this.$router.push("/detail");
    },
    setinfo() {
      this.$router.push("/personinfo");
    },

    select(id, userid, img) {
      this.show = true;
      this.userid = userid;
      this.messageid = id;
      this.imgname = img;
    },
    quxiao() {
      this.show = false;
    },

    // 删除动态
    deleteDongtai() {
      this.axios
        .post("apis/kuan_api/DeleteDongTai.php", {
          id: this.messageid,
          img: this.imgname,
        })
        .then((res) => {
          console.log(res.data);
          this.show = false;
          this.$toast.success("删除成功");
          this.getmessage();
        });
      console.log(this.messageid);
      console.log(this.imgname);
    },
    // 跳转模块
    tomodule(id) {
      this.$router.push({
        path: "/module",
        query: { productid: id },
      });
    },
  },
  created() {
    this.userid = this.$route.query.userid;
    console.log(this.userid);
    this.getmessage();
    this.getuser();
  },
};
</script>

<style scoped>
.dongtai {
  height: 100vh;
  background-color: rgb(242, 241, 246);
}
.dogtai_box {
  width: 95%;
  margin: 0 auto;
}
.btn {
  width: 100px;
  height: 40px;
  background-color: lightgray;
  opacity: 0.6;
}
.user_box {
  width: 92%;
  margin: 10px auto;
}
.nickname {
  font-weight: 500;
  font-size: 18px;
}
.level {
  background-color: rgb(65, 185, 255);
  width: 30px;
  padding-left: 15px;
  margin-left: 5px;
}
.sex {
  background-color: rgb(27, 97, 155);
  opacity: 0.9;
  padding-left: 14px;
  width: 25px;
  height: 25px;
  font-size: 18px;
  font-weight: bold;
}
p {
  margin: 0px;
  margin-top: 10px;
}
.lasttime {
  background-color: rgb(92, 110, 124);
  opacity: 0.6;
  padding-left: 14px;
  width: 75px;
  height: 25px;
}
.sex_nv {
  background-color: pink;
  opacity: 0.9;
  padding-left: 14px;
  width: 25px;
  height: 25px;
  font-size: 18px;
  font-weight: bold;
}
.all {
  padding: 5px 0px 5px 0px;
  color: rgb(146, 146, 146);
}
.message {
  margin-top: 10px;
  padding: 10px;
  border-radius: 8px;
  background-color: white;
}
.signature {
  color: rgb(173, 173, 173);
}

.selbtn {
  border: 0;
  height: 22px;
}
.top_btn {
  width: 30px;
  height: 5px;
  background-color: #e6e6e6;
}
.icon_box {
  width: 85%;
  margin: 0 auto;
  margin-top: 15px;
  margin-bottom: 15px;
}
.first_btn {
  font-size: 0.5rem;
  background-color: #f0f0f0;
  border: 0;
  height: 45px;
  width: 45px;
  border-radius: 50px;
}
.sec_btn {
  background-color: #00af5726;
  color: #00af57ff;
  font-size: 0.6rem;
  font-weight: bold;
  border: 0;
  height: 45px;
  width: 45px;
  border-radius: 50px;
}
.thi_btn {
  background-color: #00af5719;
  color: #00af57ff;
  font-size: 0.7rem;
  border: 0;
  height: 45px;
  width: 45px;
  border-radius: 50px;
}
.tag {
  height: 30px;
  margin-top: 10px;
  background-color: #80808032;
  color: black;
}
</style>